<template>
  <div>
    <div class="myRobot myRobotAPI">
      <robotNav></robotNav>
      <div class="myRobotRight">
        <div class="myRobotAPI_content">
          <div class="myRobotRight_title">
            <div class="myRobotRight_title_dd">API</div>
            <div class="myRobotRight_title_btn notBlue" @click="showEdit = !showEdit"><span>+</span>生成Key</div>
          </div>
          <div class="myRobotAPI_content_title">
            <div class="content_title_dd"><span></span>安装到网页</div>
          </div>
          <div class="myRobotAPITab">
            <div class="myRobotAPITab_title">
              <div class="myRobotAPITab_title_list">名称</div>
              <div class="myRobotAPITab_title_list">Key</div>
              <div class="myRobotAPITab_title_list">删除</div>
            </div>
            <div class="myRobotAPITab_txt">
              <div v-for="(item, index) in itemList" :key="index" class="myRobotAPITab_txt_list">
                <div class="txt_list_li">{{ item.name }}</div>
                <div class="txt_list_li">
                  <div class="list_li_key" v-html="item.maskedKey"></div>
                  <div class="list_li_btn">
                    <div
                      class="li_btn_look"
                      :class="{ active: item.isActive }"
                      @click="toggleActive(index)"
                    >
                      <img class="notBlue" src="@a/img/sv2.svg" />
                      <img class="notBlue" src="@a/img/sv3.svg" />
                    </div>
                    <img class="notBlue copy" @click="copyKey(item.key)" src="@a/img/sv94.svg" />
                  </div>
                </div>
                <div class="txt_list_li delete" @click="confirmDelete(item)">
                  <img class="notBlue" src="@a/img/sv87.svg" />
                </div>
              </div>
            </div>
          </div>
          <div class="myRobotAPI_manual notBlue"><img src="@a/img/sv95.svg"/><b>AIP</b>手册</div>
        </div>
      </div>
    </div>


    

      <!-- 生成Key -->
      <div class="alRobotWindow" v-show="showEdit">
        <div class="alRobotWindow_content">
          <div class="alRobotWindow_content_title">
            <div class="content_title_left"><span></span>生成Key</div>
            <div class="content_title_right" @click="showEdit = !showEdit"><i class="el-icon-close"></i></div>
          </div>
          <div class="alRobotWindow_content_txt">
            <div class="content_txt_list">
              <div class="txt_list_dd">Key名称</div>
              <div class="txt_list_dt">
                <el-input v-model="input" placeholder="输入Key名称"></el-input>
              </div>
            </div>
          </div>
          <div class="alRobotWindow_content_btn on">
            <button @click="generate()">生成</button>
            <button class="on" @click="showEdit = !showEdit">取消</button>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
    import robotNav from "@c/common/robotNav/robotNav";
    import { MessageBox, Message } from 'element-ui';
    import {api} from "@/api-js";

    export default {
        data() {
            return {
              input: '',
              showEdit: false,
              itemList: [

              ],
            };
        },
        components: {
          robotNav
        },
        computed: {
          
        },
        mounted() {
          this.getList();
        },
        methods:{

          async generate(){
            const [e,r] = await api.robotApi.save({
              robot_id: this.$store.getters.robotId,
              name: this.input
            });
            if(!e && r){
              this.showEdit = false;
              this.input = '';
             await this.getList()
            }
          },

          async getList() {
            const [e,r] = await api.robotApi.list({
              robot_id: this.$store.getters.robotId
            });
            if(!e && r){
              this.itemList = r.result;
              for (let i = 0; i < this.itemList.length; i++) {
                const item = this.itemList[i];
                  item.maskedKey = item.key.slice(0, 5) + '*'.repeat(item.key.length - 5);
                  item.isActive = true;
              }
            }

          },

          confirmDelete(event){
            MessageBox.confirm('确定删除该项吗？', '提示', {
              type: 'warning'
            })
                .then(() => {
                  this.delete(event);
                })
                .catch(() => {
                  // 取消删除操作
                });
          },
          async delete(event) {
            const [e,r] = await api.robotApi.remove({
              robot_id: this.$store.getters.robotId,
              id: event.id
            });
            if(!e && r){
              await this.getList();
            }
          },

          //点击展示与隐藏
          toggleActive(index) {
            const item = this.itemList[index];
            item.isActive = !item.isActive;
            console.log(item.isActive);
            if (item.isActive) {
              item.maskedKey = item.key.slice(0, 5) + '*'.repeat(item.key.length - 5);
            } else {
              item.maskedKey = item.key;
            }
            this.itemList = [...this.itemList];
          },
          //删除
          deleteItem(index) {
            MessageBox.confirm('确定要删除这条信息吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            .then(() => {
              Message.success('删除成功!');
              this.itemList.splice(index, 1);
            })
            .catch(() => {
              Message.info('已取消删除');
            });
          },
          //复制
          copyKey(text) {
            // 使用Clipboard API复制文本到剪贴板
            navigator.clipboard.writeText(text)
              .then(() => {
                Message.success('内容已复制到剪贴板!');
              })
              .catch((error) => {
                Message.info('复制失败!');
              });
          },

        },
    }
</script>


<style>
@import "myRobotAPI.css";
</style>

